<template>
  <div style="position: relative">
    <!--    <SearchDialog class="dialog"/>-->
    <!-- <h1 class="title">系统日志</h1> -->
    <div class="flex tool">
      <el-date-picker v-model="timeRange" type="datetimerange" rangeSeparator="-" startPlaceholder="开始时间" endPlaceholder="结束时间"></el-date-picker>
      <el-input v-model="keywords" placeholder="请输入搜索内容..." style="width: 280px; margin: 0 15px"></el-input>
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <HETTable1 ref="systemLogTable" :tableData="data.tableData" :tHead="data.tHead" :total="data.total" @getTableData="getSystemLogList">
      <template #timestamp>
        <el-table-column label="操作时间" width="200">
          <template #default="scope">
            {{ moment(scope.row.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
      </template>
    </HETTable1>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import moment from 'moment'
import { mAxios } from '~/utils/axios/axios.js'

const systemLogTable = ref()

onMounted(() => {})
const data = reactive({
  tHead: [
    // {
    //   label: "ID",
    //   prop: "operationLogId",
    //   isCustom: false,
    //   // width: 200,
    // },
    { label: '操作时间', prop: 'createdAt' },
    { label: '用户', prop: 'username' },
    { label: 'IP', prop: 'ip' },
    { label: '执行动作', prop: 'action' },
    { label: '结果', prop: 'result' }
  ],
  tableData: [],
  total: null
})
const timeRange = ref([])
const keywords = ref('')
const search = () => {
  let params = {
    keywords: keywords.value,
    start: timeRange.value ? moment(timeRange.value[0]).format('YYYY-MM-DD HH:mm:ss') : null,
    end: timeRange.value ? moment(timeRange.value[1]).format('YYYY-MM-DD HH:mm:ss') : null
  }
  systemLogTable.value.getTableData(params)
}

// 获取表格数据
const getSystemLogList = async (initTableParams, keywords, param) => {
  systemLogTable.value.loading()
  let params = {
    ...initTableParams,
    ...param
  }
  try {
    const { data: res } = await mAxios.get('log', { params })
    systemLogTable.value.finish()
    data.tableData = res.data.rows || []
    data.total = res.data.total || 0
  } catch (err) {
    systemLogTable.value.finish()
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  position: absolute;
  top: 0;
  left: 230px;
}
.tool {
  position: absolute;
  top: 13px;
  left: 18px;
  width: 600px;
}
</style>
